<template>
  <div class="content">
    <el-col :span="11">
      <el-card style="margin: 5px">
        <template #header>
          <div class="card-header">
            <span>编辑选项</span>
          </div>
        </template>
        <div class="edit">
          <div v-if="modelValue.sectionType == 'radio'">
            <el-form>
              <el-form-item label="标题">
                <el-input placeholder="标题" v-model="radioData.name" />
              </el-form-item>
            </el-form>
            <el-button @click="handleRadioAdd">
              <el-icon style="vertical-align: middle">
                <Plus />
              </el-icon>
              增加选项
            </el-button>
          </div>
          <div v-else-if="modelValue.sectionType == 'checkBox'">
            <el-form>
              <el-form-item label="标题">
                <el-input placeholder="标题" v-model="checkBoxData.name" />
              </el-form-item>
            </el-form>
            <el-button @click="handleCheckBoxAdd">
              <el-icon style="vertical-align: middle">
                <Plus />
              </el-icon>
              增加选项
            </el-button>
          </div>
          <div v-else-if="modelValue.sectionType == 'input'">
            <el-form>
              <el-form-item label="标题">
                <el-input placeholder="标题" v-model="inputData.name" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="2">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          font-size: large;
        "
      >
        <div style="text-align: center">>></div>
      </div>
    </el-col>
    <el-col :span="11">
      <el-card style="margin: 5px">
        <template #header>
          <div class="card-header">
            <span>预览</span>
          </div>
        </template>
        <div class="view">
          <div v-if="modelValue.sectionType == 'radio'" style="display: flex;flex-direction: column;">
            <span>{{ radioData.name }}</span>
            <el-radio-group>
              <el-radio
                v-for="(item, index) in radioData.options"
                :key="index"
                :label="item.name"
              >
                <img :src="getImgSrc(item.img)" v-if="item.img" />
                <span>{{ item.name }}</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="modelValue.sectionType == 'checkBox'" style="display: flex;flex-direction: column;">
            <span>{{ checkBoxData.name }}</span>
            <el-checkbox-group>
              <el-checkbox
                v-for="(item, index) in checkBoxData.options"
                :key="index"
                :label="item.name"
              >
                <img :src="getImgSrc(item.img)" v-if="item.img" />
                <span>{{ item.name }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else-if="modelValue.sectionType == 'input'">
            <el-form>
              <el-form-item :label="inputData.name">
                <el-input placeholder="文本输入框" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </el-col>
  </div>
</template>
  
  <script setup>
import { reactive } from "vue";
const props = defineProps({
  modelValue: {
    default: "",
    type: Object,
  },
  disabled: {
    default: false,
    type: Boolean,
  },
});
const Data = reactive({
  resourcesUrl: import.meta.env.VITE_APP_RESOURCES_URL,
  comfirm: false,
  radioData: {
    name: "",
    options: [
    ],
  },
  checkBoxData: {
    name: "",
    options: [
    ],
  },
  inputData: {
    name: "",
  },
});
const { comfirm, radioData, checkBoxData, inputData } = toRefs(Data);
const emit = defineEmits(["update:modelValue"]);
function handleRadioAdd() {
  Data.radioData.options.push({
    name: "文本",
    img: "text.png",
  });
}
function handleCheckBoxAdd() {
  Data.checkBoxData.options.push({
    name: "文本",
    img: "text.png",
  });
}
function handleRadioComfirm() {
  emit("update:modelValue", { ...props.modelValue, data: Data.radioData });
}
function handleInputComfirm() {
  emit("update:modelValue", { ...props.modelValue, data: Data.inputData });
}
function handleCheckBoxComfirm() {
  emit("update:modelValue", { ...props.modelValue, data: Data.checkBoxData });
}

/**
 * 获取图片路径
 */
const getImgSrc = (url) => {
  if (!url) {
    return "";
  }
  if (url.indexOf("http://") === 0 || url.indexOf("https://") === 0) {
    return url;
  }
  return Data.resourcesUrl + url;
};
onMounted(() => {
  switch (props.modelValue.sectionType) {
    case "radio":
      handleRadioComfirm();
      break;
    case "checkBox":
      handleCheckBoxComfirm();
      break;
    case "input":
      handleInputComfirm();
      break;
  }
});
</script>
  
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: row;
}
.edit {
  display: flex;
  flex-direction: column;
}
.view {
  display: flex;
  flex-direction: column;
}
</style>
  